import React, { useImperativeHandle, forwardRef, useRef, useState } from 'react';
import { View, Text, StyleSheet, TextInput, Modal, TouchableHighlight, ActivityIndicator } from 'react-native'
import { connect } from 'react-redux'
import { pTx } from "../utils/dimensions"

const VerifyPasswordModal = forwardRef((props, ref) => {
    const [modalVisible, setModalVisible] = useState(false);
    const [loading, setLoading] = useState(false);
    const [password, setPassword] = useState('')
    const textInputRefs = useRef(null)


    const show = () => {
        setPassword("")
        setModalVisible(true)
        setTimeout(() => {
            textInputRefs.current?.focus()
        }, 300)
    }

    const sendSure = () => {
        setLoading(true)
        props.sendExamine(password)
    }

    useImperativeHandle(ref, () => ({
        show,
        setLoading,
        setModalVisible
    }))

    return (
        <Modal
            animationType="fade"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
                setModalVisible(!modalVisible);
            }}
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text style={styles.name}>验证密码</Text>
                    <TextInput
                        ref={textInputRefs}
                        keyboardType={'email-address'}
                        value={password}
                        style={styles.textInputRefs}
                        placeholder="钱包密码"
                        onBlur={() => sendSure()}
                        onChangeText={value => setPassword(value)}
                    >
                    </TextInput>

                    <View style={styles.footButton}>
                        <TouchableHighlight
                            style={[styles.openButton, styles.borderRight]}
                            underlayColor="rgba(0,0,0,0.1)"
                            onPress={() => {
                                !loading ? setModalVisible(!modalVisible) : ""
                            }}
                        >
                            <Text style={styles.textStyle}>取消</Text>
                        </TouchableHighlight>
                        <TouchableHighlight
                            style={styles.openButton}
                            onPress={() => !loading ? sendSure() : ""}
                            underlayColor="rgba(0,0,0,0.1)"
                        >
                            <>
                                {loading ? <ActivityIndicator /> : ""}
                                <Text style={[styles.textStyle, { color: "#06C161" }]}>确定</Text>

                            </>

                        </TouchableHighlight>
                    </View>
                </View>
            </View>
        </Modal>
    );
})

const mapStateToProps = (state) => state.wallet

const mapDispatchToProps = {
}


export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(VerifyPasswordModal)

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "rgba(0,0,0,0.1)",
    },
    modalView: {
        width: pTx(280),
        backgroundColor: "white",
        borderRadius: pTx(6),
        shadowColor: "rgba(0,0,0,0.5)",
        shadowOffset: {
            width: 0,
            height: 1
        },
        shadowOpacity: 0.1,
        shadowRadius: 1,
        elevation: 5
    },
    name: {
        paddingVertical: pTx(20),
        fontSize: pTx(16),
        color: "#0A0C14",
        textAlign: "center"

    },
    textInputRefs: {
        marginHorizontal: pTx(15),
        paddingHorizontal: pTx(15),
        height: pTx(45),
        fontSize: pTx(16),
        backgroundColor: "#fff",
        borderRadius: pTx(4),
        borderWidth: 1,
        borderColor: "rgba(0,0,0,0.1)",

    },
    footButton: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    openButton: {
        marginTop: pTx(20),
        flex: 1,
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        height: pTx(45),
        borderTopWidth: 1,
        borderTopColor: "rgba(0,0,0,0.1)",
    },
    borderRight: {
        borderRightWidth: 1,
        borderRightColor: "rgba(0,0,0,0.1)",
    },
    textStyle: {
        fontSize: pTx(16),
    }
})